<template>
  <nav ref="nav">
    <div class="nav">
     <div class="nav-left">
         <img src="https://h5static.kuwo.cn/www/kw-www/img/logo.dac7499.png" alt="">
        
     </div> 
     <div class="nav-meddle">
       <ul>
          <li v-for="(item,index) in name" :key="index" @click="tab(index)" :class="{active:index==num}" >{{item}}</li>
       </ul>
       </div>
        <div class="nav-right">
         <input type="text" name="" id="" placeholder="搜索音乐/MV/歌单/歌手"  v-model="msg" ><label for="" @click="login1">登录/注册</label>
         <!-- @click="getchange" -->
         <div class="hot" v-show="shows">
       <ul >
         <li v-for="(item,index) in hot" :key="index">
          {{index+1}} {{item.k}}
         </li>
       </ul>
       <ul class="info" >
         <li v-for="(list,index) in info" :key="index" @click="music(list.rid,list.pic,list.artist,list.name)">
           <span id="span">{{index+1+'.'+list.artist}}---{{list.name}}</span>
         </li>
       </ul>
     </div>
     </div>
    
     <div class="nav-button">
       <ul><li v-for="(list,index) in lists" :key="index" @click="tabbutton(index,list)" :class="{_active:index==showse}">{{list}}</li></ul>
     </div>
      
  </div>
  <div class="login" v-show="login">
    <img src="../assets//img/关  闭.png" alt="" id="clock" @click="clock">
    <div class="image">
      <div>
        <img src="../assets/img/qq (1).png" alt="">
        <p>QQ</p>
      </div>

      <div>
        <img src="../assets/img/weixin.png" alt="">
        <p>微信</p>
      </div>
      <div>
        <img src="../assets/img/weibo-fill.png" alt="">
        <p class="p1">新浪微博</p>
      </div>
      <div>
        <img src="https://image.kuwo.cn/website/favicon.ico" alt="">
        <p class="p1">酷我账号</p>
      </div>
    </div>
    <div class="longbtn">
      <span @click="detail">快捷登录|</span><span @click="detail">注册</span>
     <div>
       <input type="checkbox" ref="check">
        <p>同意</p>
        <p>(酷我音乐用户服务协议)</p>
        <p>(隐私政策)</p>
     </div>
    </div>
  </div>
  </nav>
</template>

<script>
export default {
  
  data(){
    return { 
      name:['发现音乐','下载客户端','音乐现场','VIP会员','酷我畅听','酷我耳机','更多'],
      lists:['推荐','排行榜','歌手','歌单','MV'],
      num:0,
      num1:0,
      hot:[],
      info:[],
      msg:'',
      shows:false,
      showse:0,
      login:false
    }

  },
  
  methods:{

    music(i,j,x,y){
      console.log(1111);
      this.$router.push({
        path:'/music',
        query:{
          indexid:i,
          putiur:j,
          name:x,
          songname:y
        }
      })
    },
    get(){
      this.axios.get('http://iecoxe.top:5000/v1/kuwo/search?',{
        params:{
          key:this.msg
        }
      })
      
      .then(res=>{
        console.log(res.data.data);
        this.info=res.data.data.list
      }).catch(err=>{
        console.log(err);
      })


    
		

    },
    detail(){
      if(this.$refs.check.checked==true){
        alert('欢迎用户')
          this.login=false
      }else{
           alert('请同意酷我音乐用户服务协议及隐私政策')
      }
      console.log();
      
    },
    clock(){
      this.login=false
    },
    getnav(){
      this.hot=''
    },
    tab(i){
      this.num=i
    },
    tabbutton(j,list){
      this.showse=j
      this.num1=j
      localStorage.setItem('tab',j)
      if(list=='排行榜'){
        this.$router.push({
        path:'/ranklist'
      })
      }
      if(list=='推荐'){
          this.$router.push({
              path:'/'
          })
      }
       if(list=='歌手'){
          this.$router.push({
              path:'/singerlist'
          })
      }
      if(list=='歌单'){
        this.$router.push({
          path:'/songsheet'
        })
      }
      if(list=='MV'){
        this.$router.push({
          path:'/mvlist'
        })
      }
    },
    login1(){
      this.login=true
      
    }
  },
  watch:{
    msg:{
      handler(val){
        this.get()
        if(this.msg.length>0){
          this.shows=true
        }else{
          this.shows=false
        }
      },
    },
    $route(){
      console.log(11111);
        if(this.$route.path=='/'){
            this.showse=0
        }else if(this.$route.path=='/ranklist'){
          this.showse=1
        }else if(this.$route.path=='/singerlist'){
          this.showse=2
        }else if(this.$route.path=='/songsheet'){
          this.showse=3
        }else if(this.$route.path=='/mvlist'){
          this.showse=4
        }
         
  
    },
    showse(){
      console.log(this.showse);
    }
  },
  created(){
   this.showse=localStorage.getItem('tab')
      
    
  },
  
}
</script>

<style  lang="scss" scoped>
.login{
  position: fixed;
  z-index: 99;
  width: 500px;
  height: 600px;
  // background-color:rgb(212, 215, 224);
  background-color: #fff;
  left: 40%;
  #clock{
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .image{
    width: 300px;
    margin: 0 auto;
    // border: 1px solid;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    img{
      margin-right: 40px;
      margin-top: 80px;
      border: 1px solid #eee;
      border-radius: 50%;
      width: 60px;
      height: 60px;
  
    }
    // div{
    //   width: 65px;
    //   // text-align: center;
    //   margin-right: 50px;
    // }
    p{
      // text-align: center;
      margin-left: 20px;
      font-size: 14px;
    }
    .p1{
      margin-left: 10px;
    }
  }
  .longbtn{
    margin-top: 100px;
    width: 300px;
    transition: 2s linear;
    margin: 150px auto;
    text-align: center;
      span{
       font-size: 13px;
       color: #487bb6;
      }
      input{
        margin-top: 5px;
      }
    div{
      display: flex;
    }
  }
}

.el-carousel__container {
    position: relative;
    height: 500px;
    }

.hot{
   transition:5s;
   position: absolute;
    z-index: 999;
    height: 400px;
     overflow: hidden;
     width: 320px  ;
       background-color: #fff;
      border-radius: 20px;
      border: none;
     transition: 2s linear;
     
     
  ul{
    width: 320px  ;
        
     overflow: auto;
    &::-webkit-scrollbar {
            width: 3px;
            height: 1px;
            display: none;
        }
   
    li{
      height: 10px;
      cursor: pointer;
      margin-left: 20px;
   
      
      #span{
        float: left;
   
        height: 50px;
        
      }
      #span:hover{
          color:#ccc;
        }
     
    }
  }
  .info{
      // width: 520px;
    height: 620px;
    // margin-right: 10%;
    // border: 1px solid #eee;
    // position: absolute;
    // float: right;
    display: block  !important;
    
   
    li{
     
      //  width: 620px;
      color: #000;
      width: 215px;
      z-index: 999;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
  }
}
.nav{
  // position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 80px;
    width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    min-width: 1200px;
    img{
        width: 131px;
        height: 39px;
        margin-top: 18px;
       
    }
        ul{
           display: flex;
           margin-right: 180px;
           li{
               width: 80px;
               line-height: 80px;
               margin-left: 20px;
               cursor: pointer;
               text-align: center;
        

           }
           .active{
            background-color: #ffe443;
            font-weight: 800;
            
        }
        }
       .nav-right{
         position: relative;
           line-height: 80px;
           input{
               width: 200px;
               height: 30px;
               margin-right: 20px;
               outline: none;
               padding-left: 10px;
            //    margin-left: 50px;
           }
       }
       .nav-button{
           margin-left: 230px;
           font-size: 14px;
            ul{
                li{
                    margin-left:-20px ;
                }
            }
       }
       ._active{
        font-weight: 800;
        border-bottom: 3px solid red;
        .active1{
            color: red;
        }
       }
      
       
    
}
</style>

